<template>
    <div class="center">
      <div class="common-layout ">
              <el-container>
                  <el-aside width="700px">
                      <div class="tt">
                          <div class="bigimg">
                              <el-image style="width: 600px; height: 822px" :src="`http://localhost:8080/${list.cimg}`" />
                          </div>
                          <br />
                          <div class="smallimg">
                              <el-image style="width: 80px; height: 56px" :src="`http://localhost:8080/${list.cimg}`" />
                              <div style="width: 80px; height:4px;background-color: rgb(204, 28, 104);"></div>
                              <!-- <hr style="background-color:rgb(204, 28, 104); height:2px;" /> -->
                          </div>
                      </div>
                  </el-aside>
                  <el-aside width="500px">
                      <div  class="nr">
                          <span  class="v-flag"><img src="../assets/v.svg" alt=""></span>
                          <span class="guanf">
                              该作品拥有元艺Art官方认证
                          </span>
                          <div class="title" >
                              <h1 s>{{ list.cname }}</h1>
                              <div style="color: rgba(44,44,52,.5);font-size: 24px;margin-top: -30px;">编号：</div>
                              <div v-for="item in list.lists" style="display:inline-block">
                              <P style="font-size: 16px; margin-top:-45px;line-height: 20px;
                              color: rgba(44,44,52,.5);" >
                                  #{{ item}}</P>
                              </div>
                              
                          </div>
                          <h1 style="font-size: 30px;margin: 10px 0 15px 0;"> 作品描述：</h1>
                          <div class="description" >{{list.content }}</div>
                          <div style="margin-top: 25px;display: inline-block;">
                              <span style="background-color:#abaab9;color: #fff;">发行</span>
                              <span> :{{ list.releasenum }}份</span> &nbsp;&nbsp;&nbsp;&nbsp;
                          </div>
                          <div style="margin-top: 25px; display:inline-block;margin-left: 250px;color: rgba(20,24,31,.6);"><span>全球限量发售{{list.releasenum}}份</span></div>
                          
  
                              <div  class="p-line"></div>
                              <div class="show-in-pc">
                              <div style="font-size: 20px;
                                  line-height: 20px;
                                  color: rgba(20,24,31.6);
                                  opacity: 0.8;
                                  margin-top: 20px;
                                  margin-bottom: 5px;">拥有者:</div>
                              </div>
                              <div class="names">
                                  <div class="nickname" style="font-size: 20px; margin-top: 5px;color: rgb(255,107,0);">{{list.nickname}}</div>
                              </div>
                      </div>
                      <el-button type="primary" round size="large" class="mall" @click="dialogFormVisible = true" ><span>售卖</span></el-button>
  
                      <el-dialog v-model="dialogFormVisible" title="上架提示" center="true" width="550px">
                          <el-form :model="form">
                              <div style="margin-left: 10px;">
                                  <span>藏品编号</span>
                                  <el-select v-model="this.colls.cid" class="m-2" placeholder="0" size="large">
                                      <el-option v-for="item in this.list.lists" :label="item" :value="item" />
                                  </el-select>
                              
                                  
                              </div>
  
                              <el-form-item label="上架价格" style="margin-left: 20px; width:250px;margin: 30px 0 30px 0;">
                                  <el-input  size="large" v-model="colls.price" oninput="value=value.replace(/[^0-9.]/g,'')" autocomplete="off" />
                              </el-form-item>
                              
  
  
                          </el-form>
                          <template #footer>
                              <span class="dialog-footer">
                                  <el-button type="primary" @click="sellcoll">确认</el-button>
                                  <el-button @click="dialogFormVisible = false">取消</el-button>
                              </span>
                          </template>
                      </el-dialog>
      
      
                  </el-aside>
              </el-container>
          </div>
          <div>
              <h1>关于数字藏品</h1>
              数字藏品可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721标准/协议所发行，特性为不可分割、不可替代、独一无二。数字藏品常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
          </div>
      </div>
    
  </template>
  
  <script>
  
  import { ElMessage } from 'element-plus'
  
  export default {
    name: 'Showcoll',
  
    data() {
      return {
      dialogFormVisible:false,
        obj:{
          cname:'',
          username:'',
        },
        list:[],
        colls:{
          cname:'',
          cid:'',
          price:'',
        }
      };
    },
  
    mounted() {
      this.getToken();
      this.getcName();
      this.$http.post("user/showcollinto",this.obj)
        .then((response)=>{
          this.list=response.data;
          console.log(this.list);
      }) 
    },
  
    methods: {
      getToken() {
          this.obj.username = sessionStorage.getItem('token');
      },
      getcName(){
          this.obj.cname = this.$route.params.cname;
      },
      sellcoll(){
        console.log(this.colls.cid);
          this.colls.cname = this.list.cname;
  
          // this.dialogFormVisible=false;
          this.$http.post("user/sellcoll", this.colls)
          .then((response) => {
              if(response.meta.status === 200){
                ElMessage({
                    showClose: true,
                    message: '上架成功',
                    type: 'success',
                })
                this.dialogFormVisible = false;
                this.$router.push('/shop/') 
              }else{
                  ElMessage({
                      showClose: true,
                      message: '上架失败',
                      type: 'success',
                  })
              }
      }) 
      }
    },
  };
  </script>
  
  <style lang="css" scoped>
  /* div{
      display: inline-block;
  } */
  
  .v-flag {
      width: 16px;
      height: 16px;
      /* background: url('../assets/v.svg') 50% no-repeat; */
      margin-top: 5px;
  
  }
  .guanf{
      display: inline-block;
      font-size: 14px;
      line-height: 20px;
      color: #2c2c34;
  }
  .bigimg{
      /* margin-left: -100px; */
      margin-top: 20px;
      display: inline;
      
  }
  .el-image{
      border-radius: 10px;
      
  }
  .smallimg{
      /* margin-left: -620px; */
      margin-top: 10px;
      
  }
  .text{
      background-color: red;
      transform:translateY(-50%);/**上移元素**/
  }
  /* .nr{
      margin-left: -350px;
  } */
  .title{
      display: inline;
      font-weight: 700;
      font-size: 40px;
      line-height: 44px;
      color: #2c2c34;
  }
  .price{
      font-weight: 700;
      font-size: 40px;
      line-height: 44px;
      color: #2c2c34;
  }
  
  .p-line {
      margin: 24px 0;
      height: 1px;
      margin-top: 40px;
      background: #2c2c34;
      opacity: .1;
  }
  
  .description{
      background: #fefefe;
      box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
      border-radius: 10px;
      color: rgba(44,44,52,.5);
      word-break: break-all;
      line-height: 50px;
  }
  
  .mall{
      margin-top: 55px;
      width: 500px;
      height: 56px;
  }
  </style>